<script setup lang="ts">
import error from '@/assets/bit-screen/schedule-mge/error.png'
import right from '@/assets/bit-screen/schedule-mge/right.png'
const logList = [
  {
    title: '关闭图传成功',
    status: 1,
    time: '2024-7-25 11.10.25'
  },
  {
    title: '关闭灯光成功',
    status: 1,
    time: '2024-7-25 11.15.01'
  },
  {
    title: '无人机环境检查',
    status: 1,
    time: '2024-7-25 11.18.13'
  },
  {
    title: '出舱',
    status: 1,
    time: '2024-7-25 11.28.15'
  },
  {
    title: '出舱',
    status: 0,
    time: '2024-7-25 11.42.40'
  }
]
</script>

<template>
  <div class="runLogBox">
    <!-- <div class="flex justify-between items-center" v-for="(item, index) in logList" :key="index"> -->
    <div
      class="flex justify-between items-center item-box"
      v-for="(item, index) in logList"
      :key="index"
    >
      <div class="flex items-center">
        <p style="margin-right: 10px">{{ item.title }}</p>
        <!-- <div class="imgBox"> -->
        <img class="imgBox" v-if="item.status === 0" :src="error" alt="" />
        <img class="imgBox" v-else :src="right" alt="" />
        <!-- </div> -->
      </div>
      <p class="time-box">{{ item.time }}</p>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  font-family: Source Han Sans CN;
}
.runLogBox {
  width: 100%;
  .item-box {
    height: 4.3vh;
  }
  .time-box {
    font-size: 14px;
    font-weight: 400;
  }
  .imgBox {
    margin-left: 10px;
    border: none;
  }
}

@media screen and (min-height: 950px) {
  .runLogBox {
    .item-box {
      height: 5vh !important;
    }
  }
}
@media screen and (max-height: 730px) {
  .item-box {
    font-size: 14px !important;
    .imgBox {
      width: 20px;
    }
  }
}
</style>
